import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form, Input, DatePicker, Select, Button, Card, InputNumber, Radio, Icon, Tooltip,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './EditProfile.less';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@connect(({ profile,loading }) => ({
  profile:profile,
  submitting: loading.effects['profile/submitRegularForm'],
}))
@Form.create({
  mapPropsToFields(props) {
    const {profile} = props;
    return {
      petName: Form.createFormField({
        value: profile.info.petName
      }),
      gender: Form.createFormField({
        value: profile.info.gender
      }),
      age: Form.createFormField({
        value: profile.info.age
      }),
      birthday: Form.createFormField({
        value: profile.info.birthday
      }),
      hometown: Form.createFormField({
        value: profile.info.hometown
      }),
      profession: Form.createFormField({
        value: profile.info.profession
      }),
      status: Form.createFormField({
        value: profile.info.status
      }),
      resume: Form.createFormField({
        value: profile.info.resume
      }),
    };
  },
})
export default class BasicForms extends PureComponent {
  state={
    info:{}
  }
  componentDidMount() {
    const {profile} = this.props;
    this.setState({info:profile.info});
    console.log('收到的参数');
    console.log(profile.info);
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      const info=this.state.info;
      for(let k in values) {
        info[k]=values[k];
      }
      this.setState({info:info});
      console.log(info)
      if (!err) {
        this.props.dispatch({
          type: 'profile/submitRegularForm',
          payload: info,
        });
      }
    });
  }
  render() {
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout title="基本设置">
        <Card bordered={false}>
          <Form
            onSubmit={this.handleSubmit}
            hideRequiredMark
            style={{ marginTop: 8 }}
          >
            <FormItem
              {...formItemLayout}
              label="昵称"
            >
              {getFieldDecorator('petName', {
                rules: [{
                  required: true, message: '不能为空',
                }],
              })(
                <Input placeholder="起个名字吧" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="家乡"
            >
              {getFieldDecorator('hometown', {
                rules: [{
                  required: true, message: '不能为空',
                }],
              })(
                <Input placeholder="出生的地方" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="职业"
            >
              {getFieldDecorator('profession', {
                rules: [{
                  required: true, message: '不能为空',
                }],
              })(
                <Input placeholder="请选择自己的职业" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="个性签名"
            >
              {getFieldDecorator('resume', {
                rules: [{
                  required: true, message: '不能为空',
                }],
              })(
                <TextArea style={{ minHeight: 32 }} placeholder="请多多介绍自己吧" rows={4} />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="性别"
              help=""
            >
              <div>
                {getFieldDecorator('gender', {
                  rules: [{
                    required: true, message: '不能为空',
                  }],
                })(
                  <Radio.Group>
                    <Radio value="1">男</Radio>
                    <Radio value="2">女</Radio>
                    <Radio value="3">保密</Radio>
                  </Radio.Group>
                )}
              </div>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="生日"
            >
              {getFieldDecorator('birthday', {
                rules: [{
                  required: true, message: '不能为空',
                }],
              })(
                <DatePicker style={{ width: '100%' }} placeholder="选择出生的那天吧" />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Button style={{ marginLeft: 8 }}>保存</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
